<template>
  <div class="v-container">
    <v-header title="机场P+R停车">
      <span class="back" @click="goBack">
        <i class="el-icon-arrow-left"></i>
      </span>
    </v-header>
    <v-dialog v-if="dialogWhetherShow" v-on:listenDialog="listenDialog">
      <header style="margin-top:20px">
        机场P+R停车预约信息
      </header>
      <div class="popup_con">
        <table>
          <tbody>
            <tr>
              <td class="td1">手机号：</td>
              <td class="td2">{{reserveInfo.telephone}}</td>
            </tr>
            <tr>
              <td class="td1">机场名称：</td>
              <td class="td2">{{reserveInfo.airportName}}</td>
            </tr>
            <tr>
              <td class="td1">停车时间：</td>
              <td class="td2">{{reserveInfo.bespeakTime}}</td>
            </tr>
            <tr v-if="reserveInfo.startFlightNumber !== ''">
              <td class="td1">出发航班号：</td>
              <td class="td2">{{reserveInfo.startFlightNumber}}</td>
            </tr>
            <tr v-if="reserveInfo.startFlightNumber == ''">
              <td class="td1">出发航班号：</td>
              <td class="td2">无</td>
            </tr>
            <tr>
              <td class="td1">取车时间：</td>
              <td class="td2">{{reserveInfo.backCarTime}}</td>
            </tr>
            <tr v-if="reserveInfo.returnFlightNumber !== ''">
              <td class="td1">返程航班号：</td>
              <td class="td2">{{reserveInfo.returnFlightNumber}}</td>
            </tr>
            <tr v-if="reserveInfo.returnFlightNumber == ''">
              <td class="td1">返程航班号：</td>
              <td class="td2">无</td>
            </tr>
            <tr>
              <td class="td1">车牌号：</td>
              <td class="td2">{{reserveInfo.carId}}</td>
            </tr>
            <tr>
              <td class="td1">出行人数：</td>
              <td class="td2">{{reserveInfo.personNumber}}</td>
            </tr>
              
          </tbody>
        </table>
      </div>
      <!--<ul class="dialog-ul">
        <li><span>手机号:</span><span>{{reserveInfo.telephone}}</span></li>
        <li><span>机场名称:</span><span>{{reserveInfo.airportName}}</span></li>
        <li><span>停车时间:</span><span>{{reserveInfo.bespeakTime}}</span></li>
        <li v-if="reserveInfo.startFlightNumber !== ''"><span>出发航班号:</span><span>{{reserveInfo.startFlightNumber}}</span></li>
        <li v-if="reserveInfo.startFlightNumber == ''"><span>出发航班号:</span><span>无</span></li>
        <li><span>取车时间:</span><span>{{reserveInfo.backCarTime}}</span></li>
        <li v-if="reserveInfo.returnFlightNumber !== ''"><span>返程航班号:</span><span>{{reserveInfo.returnFlightNumber}}</span></li>
        <li v-if="reserveInfo.returnFlightNumber == ''"><span>返程航班号:</span><span>无</span></li>
        <li><span>车牌号:</span><span>{{reserveInfo.carId}}</span></li>
        <li><span>出行人数:</span><span>{{reserveInfo.personNumber}}</span></li>
      </ul>-->
      <div>
        <mt-button type="default" style="border-top-left-radius:20px;border-bottom-left-radius:20px;border-top-right-radius:0px;border-bottom-right-radius:0px;border:1px solid #F37938" @click="dialogWhetherShow = false">取消提交</mt-button>
        <mt-button type="default" style="border-top-right-radius:20px;border-bottom-right-radius:20px;border-top-left-radius:0px;border-bottom-left-radius:0px;background-color:#F37938;color:#fff" @click="Confirmsubmit()">确定提交</mt-button>
      </div>
    </v-dialog>
    <div class="mt" style="position:relative">
      <img src="@/assets/images/jctc_banner.jpg" width="100%">
      <span @click="$router.push('/airportParkingServiceArea')" style="margin-top: 10px;padding: 10px;color: orange;position:absolute;top:120px;left:8px">点击查看机场P+R停车服务范围>></span>
      <div class="login-box">
        <ul class="itemList">
          <li>
            <mt-field label="手机号:" placeholder="请输入手机号" v-model="reserveInfo.telephone" disabled></mt-field>
          </li>
          <li @click="toAirportParkingList()">
            <mt-field label="机场名称:" placeholder="请选择机场" v-model="reserveInfo.airportName"></mt-field>
          </li>
          <li @click="chooseTime1">
            <mt-field label="停车时间:" placeholder="请选择停车时间" v-model="reserveInfo.bespeakTime" disabled></mt-field>
          </li>
          <mt-datetime-picker ref="picker1" type="datetime" v-model="time" @confirm="confirm" :startDate="startDate" :endDate="endDate" year-format="{value}" month-format="{value}月" date-format="{value}日" hour-format="{value}时" minute-format="{value}分"></mt-datetime-picker>
          <li>
            <mt-field label="出发航班号:" placeholder="建议填写" v-model="reserveInfo.startFlightNumber"></mt-field>
          </li>

          <li @click="chooseTime">
            <mt-field label="取车时间:" placeholder="大致时间即可" v-model="reserveInfo.backCarTime" disabled></mt-field>
          </li>
          <mt-datetime-picker ref="picker" type="datetime" v-model="time1" @confirm="confirm1" :startDate="startDate" :endDate="endDate" year-format="{value}" month-format="{value}月" date-format="{value}日" hour-format="{value}时" minute-format="{value}分"></mt-datetime-picker>
          <li>
            <mt-field label="返程航班号:" placeholder="建议填写" v-model="reserveInfo.returnFlightNumber"></mt-field>
          </li>

          <li>
            <mt-field label="车牌号:" placeholder="请输入车牌号" v-model="reserveInfo.carId" disabled></mt-field>
          </li>
          <li class="graySelect" style="padding-right: 15px;">
            <!-- <mt-cell title="出行人数:">
              <span>icon 是图片</span>
              <img slot="icon" src="../assets/100x100.png" width="24" height="24">
            </mt-cell> -->
            <mt-cell title="出行人数:" style="position:relative;display: -webkit-box;-webkit-box-flex: 0;-ms-flex: none;flex: none;" >
              <!-- <span style="position: absolute;left: 120px;top: 18px;">人</span> -->
            </mt-cell>
            <div class="mint-cell-value" style="width: 100%;">
              <select style="color:#545454;" class="mint-field-core" name="number-choice" v-model="reserveInfo.personNumber">
                <option style="display:none" disabled selected value="">请选择出行人数</option>
                <option value="1">1人</option>
                <option value="2">2人</option>
                <option value="3">3人</option>
                <option value="4">4人</option>
                <option value="5">5人</option>
              </select>
            </div>
          </li>
        </ul>

        <div id="login-title" style="background-color: #fff;margin-top: 10px;padding:10px">
          <h3 class="h3-style" style="margin:0px 0px 0px 5px;">服务流程</h3>
        </div>

        <div
          class="login-title"
          style="background-color: #fff;border-top:1px solid #80808030;padding: 10px 15px"
        >
          <ul>
            <li>1. 客户须提前24小时（节假日须提前48小时）预约本服务，可通过线上（EXEED星途官方微信服务号-尊享权益兑换-验证权益人身份-点击“机场P+R停车”-在线选择预约停车起始日期时间、停车场、往返航班号）或致电4008801768-3进行预约；</li>
            <li>2. 受理成功后，最晚将于服务前3小时通过短信形式发送确认预约成功、停车场相关信息至星途尊享权益车主手机；</li>
            <li>3. 客户凭预约入库车辆车牌号到指定停车场验证停车；</li>
            <li>4. 无须客户交钥匙，客户自停，停车场内有休息室供客户休息；</li>
            <li>5. 客户乘坐停车场定时班次摆渡车前往机场出发层；</li>
            <li>6. 返程下机后，客户凭借短信中停车场联系电话联系；</li>
            <li>7. 摆渡车会到机场地库中接到客户返回停车场；</li>
          </ul>
        </div>

        <div class="login-title" style="margin-top:10px">
          <div class="c_select" @click="changeSelect()">
            <img v-show="!select" src="@/assets/images/4_05.png" width="25">
            <img v-show="select" src="@/assets/images/3_05.png" width="25">
          </div>
          <span @click="toAirportParkingTerms()">我已了解该服务条款</span>
        </div>
      </div>

      <div class="button-box" v-on:click="submit">
        <p>预约</p>
      </div>
    </div>
  </div>
</template>

<script>
import vHeader from "@/components/Header.vue";
import countDown from "@/components/CountDown.vue";
import { Toast } from "mint-ui";
import { Resource } from "@/services/resource";
import LocalStorage from "@/services/storage";
import { formatDate } from "../../../common/utils/dateFormate/dateFormate.js"
import vDialog from "@/components/Dialog.vue";



export default {
  name: "login",
  components: {
    vHeader,
    countDown,
    vDialog
  },
  props: {
    title: {
      type: String,
      default: "标题"
    }
  },
  computed: {
    startDate() {
      let curDate = new Date();
      let preDate = new Date(curDate.getTime() + 24*60*60*1000); //前一天
      return preDate
    },
    endDate() {
      let userInfo = JSON.parse(localStorage.getItem('userInfo'))
      let _serviceEndTime=userInfo.serviceEndTime;
      let curDate = new Date(_serviceEndTime.replace(/-/g,'/'));
      let preDate = new Date(curDate.getTime()); //前一天
      return preDate
    }
  },
  data() {
    return {
      showvCode: false,
      select: false,
      time: new Date(),
      time1: new Date(),
      dialogWhetherShow: false,
      reserveInfo: {
        telephone: "",
        bespeakTime: "", // 停车时间
        userName: "",
        airportName: "",
        airportCode: "",
        backCarTime: "", // 取车时间
        startFlightNumber: "",
        returnFlightNumber: "",
        personNumber: "",
        carId: "",
        startAddress: "123",
        endAddress: "123123",
        bespType: "JCTC",
        deLatitude: "123",
        deLongitude: "123",
        longitude: "123",
        latitude: "123",
        countyName:"静安区",
        desCountyName:"徐汇区",
        distance:'10',
        city:"上海市"
      }
    };
  },
  created() {
    let userInfo = JSON.parse(localStorage.getItem('userInfo'))
    this.reserveInfo.telephone = userInfo.telephone
    this.reserveInfo.carId = userInfo.carId
    this.reserveInfo.userName = userInfo.userName

    if (this.$route.query.airportName !== undefined) {
      this.reserveInfo.airportName = this.$route.query.airportName;
      //this.reserveInfo.airportCode = "123456";
      this.reserveInfo.airportCode = this.$route.query.airportCode;
    }

    if(this.$route.query.select !== undefined) {
      this.select = this.$route.query.select
    }


    if(this.$route.query.bespeakTime) {
      this.reserveInfo.bespeakTime = this.$route.query.bespeakTime
    }
    if(this.$route.query.startFlightNumber) {
      this.reserveInfo.startFlightNumber = this.$route.query.startFlightNumber
    }
    if(this.$route.query.backCarTime) {
      this.reserveInfo.backCarTime = this.$route.query.backCarTime
    }
    if(this.$route.query.returnFlightNumber) {
      this.reserveInfo.returnFlightNumber = this.$route.query.returnFlightNumber
    }
    if(this.$route.query.personNumber) {
      this.reserveInfo.personNumber = this.$route.query.personNumber
    }
    
  },
  methods: {
    // 去服务条款详情页
    toAirportParkingTerms(){
      let _ = this
      let pars = {
        airportName:_.reserveInfo.airportName,
        bespeakTime:_.reserveInfo.bespeakTime,
        startFlightNumber:_.reserveInfo.startFlightNumber,
        backCarTime:_.reserveInfo.backCarTime,
        returnFlightNumber:_.reserveInfo.returnFlightNumber,
        personNumber:_.reserveInfo.personNumber,
      }
      _.$router.push({path:'/airportParkingTerms',query:pars})
    },
    // 去机场选择也
    toAirportParkingList(){
      let _ = this
      let pars = {
        airportName:_.reserveInfo.airportName,
        bespeakTime:_.reserveInfo.bespeakTime,
        startFlightNumber:_.reserveInfo.startFlightNumber,
        backCarTime:_.reserveInfo.backCarTime,
        returnFlightNumber:_.reserveInfo.returnFlightNumber,
        personNumber:_.reserveInfo.personNumber,
        type:1
      }
      _.$router.push({path: '/airportParkingList', query : pars})
      // $router.push({path: '/airportParkingList', query : {'type': 1}})
    },
    // 返回上一页
    goBack() {
      // this.$router.go(-1);
      this.$router.push("/mainpage");
    },
    Confirmsubmit() {
        Resource.createBespeak.post({}, this.reserveInfo ).then(res => {
          console.log(res)
          if (res.head.resultCode == '000000') {
            Toast({
              message: '创建预约订单成功',
              iconClass: 'el-icon-success'
            });
            this.$router.push('/order')
          }else{
            this.dialogWhetherShow = false
            Toast({
              message: res.head.resultMsg,
              position: 'middle'
            });
          }
          
        });
    },
    submit() {
      console.log(this.time1.getTime())
      if (this.reserveInfo.airportName === "") {
        Toast({
          message: "机场名称不能为空",
          position: 'middle'
        });
      } else if (this.reserveInfo.bespeakTime === "") {
        Toast({
          message: "停车时间不能为空",
          position: 'middle'
        });
      } else if (this.reserveInfo.backCarTime === "") {
        Toast({
          message: "取车时间不能为空",
          position: 'middle'
        });
      } else if (this.time1.getTime() < this.time.getTime()) {
        Toast({
          message: "取车时间应大于停车时间",
          position: 'middle'
        });
      } else if (this.reserveInfo.personNumber === "") {
        Toast({
          message: "出行人数不能为空",
          position: 'middle'
        });
      } else if (this.reserveInfo.personNumber > 5 || this.reserveInfo.personNumber < 0) {
        Toast({
          message: "出行人数应该在1～5人之间",
          position: 'middle'
        });
      } else if (!this.select) {
        Toast({
          message: '请勾选服务条款',
          position: 'middle'
        });
      } else {
        this.dialogWhetherShow = true
      }
    },
    changeSelect() {
      this.select = !this.select;
    },
    chooseTime() {
      this.$refs.picker.open();
    },
    chooseTime1() {
      this.$refs.picker1.open();
    },
    confirm() {
      if(this.time !== '') {
        this.reserveInfo.bespeakTime = formatDate(this.time)
      }
    },
    confirm1() {
      if(this.time1 !== '') {
        this.reserveInfo.backCarTime = formatDate(this.time1)
      }
    },
    listenDialog(data) {
      this.dialogWhetherShow = data
    }
  }
};
</script>

<style lang="less" scoped>
@import url("./style.less");
</style>
<style scoped>
li >>> .mint-field-other {
  position: static;
}
#app .graySelect >>> .mint-cell  .mint-cell-wrapper{
  padding:0;
}
</style>